<script setup>
</script>

<template>
  <section>
    <div class="max-w-275 mx-auto py-8 px-6">
      <!-- 标题 -->
      <div class="text-center mb-8">
        <h2 class="text-[#595959] text-8 tracking-normal leading-10 font-bold">Application</h2>
      </div>

      <!-- 应用网格 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 卡片1 -->
        <div class="text-center shadow-md">
          <img
              src="/src/images/services/inspection/medical-device-and-dental/application-medical-device-and-dental-1.webp"
              alt="Utility vehicles"
              class="w-full h-56 object-cover rounded-t-2xl"
          />
          <h3 class="text-lg font-semibold text-[#595959] py-4 bg-[#EDEDED]">
            Medical delivery systems
          </h3>
        </div>

        <!-- 卡片2 -->
        <div class="text-center shadow-md">
          <img
              src="/src/images/services/inspection/medical-device-and-dental/application-medical-device-and-dental-2.webp"
              alt="Electric vehicles"
              class="w-full h-56 object-cover rounded-t-2xl"
          />
          <h3 class="text-lg font-semibold text-[#595959] py-4 bg-[#EDEDED]">
            Medical testing devices
          </h3>
        </div>

        <!-- 卡片3 -->
        <div class="text-center shadow-md">
          <img
              src="/src/images/services/inspection/medical-device-and-dental/application-medical-device-and-dental-3.webp"
              alt="Commercial vehicles"
              class="w-full h-56 object-cover rounded-t-2xl"
          />
          <h3 class="text-lg font-semibold text-[#595959] py-4 bg-[#EDEDED]">
            Prosthetic devices
          </h3>
        </div>

        <!-- 卡片4 -->
        <div class="text-center shadow-md">
          <img
              src="/src/images/services/inspection/medical-device-and-dental/application-medical-device-and-dental-4.webp"
              alt="Infotainment systems"
              class="w-full h-56 object-cover rounded-t-2xl"
          />
          <h3 class="text-lg font-semibold text-[#595959] py-4 bg-[#EDEDED]">
            UV sanitation robots
          </h3>
        </div>

        <!-- 卡片5 -->
        <div class="text-center shadow-md">
          <img
              src="/src/images/services/inspection/medical-device-and-dental/application-medical-device-and-dental-5.webp"
              alt="Electric bikes and scooters"
              class="w-full h-56 object-cover rounded-t-2xl"
          />
          <h3 class="text-lg font-semibold text-[#595959] py-4 bg-[#EDEDED]">
            Surgical robotics
          </h3>
        </div>

        <!-- 卡片6 -->
        <div class="text-center shadow-md">
          <img
              src="/src/images/services/inspection/medical-device-and-dental/application-medical-device-and-dental-6.webp"
              alt="Autonomous vehicle sensors"
              class="w-full h-56 object-cover rounded-t-2xl"
          />
          <h3 class="text-lg font-semibold text-[#595959] py-4 bg-[#EDEDED]">
            Prosthetic
          </h3>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped></style>
